<v-expansion-panel-content
  v-if="available === 'geometry' || available === 'volume'"
  class=""
  :value="true"
>
  <div
    :class="$style.subpanelHeader"
    slot="header"
  >
    <v-icon>invert_colors</v-icon>
    <span class="body-2">Colors</span>
  </div>

  <v-card flat :class="$style.block">
    <v-container fluid grid-list-md>
      <v-layout row wrap align-center>
        <v-flex xs3 v-show="available === 'geometry'">
          Color By
        </v-flex>
        <v-flex xs9 v-show="available === 'geometry'">
          <v-select
            :class="[$style.noTopPadding, $style.noSelect]"
            dense
            flat
            hide-details

            v-model="colorBy"
            :items="arrays"
          />
        </v-flex>
        <v-flex xs12 v-show="colorBy.length === 0 && available === 'geometry'">
          <palette-picker
            :palette="palette"
            :value="solidColor"
            :size="20"
            v-on:input="setSolidColor"
          />
        </v-flex>
        <v-flex xs12 v-show="colorBy.length">
          <v-menu
            :close-on-content-click="false"
            offset-y
            v-model="presetMenu"
          >
            <div slot="activator">
              <span class="body-1">{{ presetName }}</span>
              <img :src="lutImage" :class="$style.lutImage" />
            </div>
            <tree-view
              v-if="presetMenu"
              :class="$style.dropdownMenu"
              :tree="presets"
              labelKey="Name"
              childrenKey="Children"
              v-on:input="onChangePreset"
            />
          </v-menu>
        </v-flex>
        <v-flex
          xs12
          v-if="available === 'volume' && piecewiseFunction && !usePresetOpacity"
          v-on:touchstart.stop
        >
          <piecewise-function-editor
            :piecewiseFunction="piecewiseFunction"
            :source="source"
            :proxyManager="proxyManager"
          />
        </v-flex>
        <v-flex xs12 v-if="available === 'volume' && usePresetOpacity">
          <v-layout row align-center>
            <v-flex xs3>
              <span :class="$style.smallLabel">Shift</span>
            </v-flex>
            <v-flex xs6>
              <v-slider
                v-model="shift"
                :min="shiftRange[0]"
                :max="shiftRange[1]"
                step="0"
                hide-details
                :class="$style.noTopPadding"
              />
            </v-flex>
            <v-flex xs3>
              <v-text-field
                v-model="shift"
                type="number"
                :min="shiftRange[0]"
                :max="shiftRange[1]"
                step="1"
                hide-details
                :class="$style.noTopPadding"
              />
            </v-flex>
          </v-layout>
        </v-flex>
        <v-flex xs12 v-if="available === 'geometry' && colorBy.length">
          <v-layout row align-center>
            <v-flex xs2>
              <v-icon
                :class="$style.click"
                v-on:click.stop="interpolateScalarsBeforeMapping = !interpolateScalarsBeforeMapping"
              >
                {{ interpolateScalarsBeforeMapping ? 'check_box' : 'check_box_outline_blank' }}
              </v-icon>
            </v-flex>
            <v-flex xs10>
              <span class="body-1">Interpolate scalar before mapping</span>
            </v-flex>
          </v-layout>
        </v-flex>
      </v-layout>
    </v-container>
  </v-card>
</v-expansion-panel-content>
